<template>
  <view class="login-body">


    <view class="login-body_form">
      <view class="login-body_form_logo">
        <u-image width="300rpx" height="300rpx" src="/static/image/logo/logo_oa_primary.png"></u-image>
      </view>
      <!--      <h1 class="login-body_form_title">欢迎使用</h1>-->
      <h4 class="login-body_form_title_text">小程序演示仿钉钉流程管理</h4>

      <view class="login-body_form_btn_login">
        <u-button type="primary" @click="login">微信授权登录</u-button>
<!--        <button type="primary" open-type="getPhoneNumber"
                @getphonenumber="getUserPhoneNumber">点击授权获取手机号
        </button>-->
      </view>


      <view class="login-body_form_login_account">
        <navigator url="/pages/login/account-login" open-type="redirect">使用账号密码登录</navigator>
      </view>

      <u-modal v-model="modelDefault.show" :content="modelDefault.content" :show-cancel-button="true" @confirm="modelDefaultConfirm"></u-modal>

      <!--      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="avatar" :src="avatarUrl"></image>
            </button>
            <view class="" style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
              <view class="input-wrap" style="">
                <input type="nickname" class="custom-input" placeholder="请输入昵称" v-model="nickName" @blur="onNickName" />
              </view>
            </view>
            <view class=""
                  style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx;">
              <view class="input-wrap" style="">
                <button type="primary" open-type="getPhoneNumber"
                        @getphonenumber="getUserPhoneNumber">点击授权获取手机号</button>

              </view>
            </view>

            <view class=""
                  style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx;">
              <view class="input-wrap" style="">
                <input class="custom-input" placeholder="用户电话号码" v-model="telephone" />
              </view>
            </view>-->

    </view>

    <view>

    </view>

  </view>
</template>

<script>
import {weChatMiAppLogin} from "@/api/api-user";


export default {
  data() {
    return {
      avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
      nickName: '',
      telephone: '',
      countryCode: '86',
      modelDefault: {
        show: false,
        content: '您还未注册，是否去注册',
        openid: ''
      },
      aaa: [],
      list: []
    }
  },
  onLoad: function () {
    // console.log('fdfdfd', this.$store.state.user.userId)

    // let token = uni.getStorageSync('foa-user-token')
    // console.log('token', token)
    // this.$store.dispatch('user/setToken', token)
  },

  methods: {
    deptChange(val) {
      // console.log(val)
    },
    //昵称选择
    onNickName: (e) => {
      console.log(e.detail.value);
    },
    //头像选择
    onChooseAvatar: (e) => {
      console.log('头像选择', e.detail.avatarUrl);
    },
    getUserPhoneNumber(e) {
      console.log("回调返回的信息：", e)
      uni.request({
        url: 'https://api.weixin.qq.com/cgi-bin/stable_token',
        method: 'POST',
        data: {
          appid: 'wx2448b1e6ac1f88db',
          secret: '2709b2e818fa04e2783e7ae0de2fe98b',
          grant_type: 'client_credential'
        },
        success(res) {
          console.log('获取access_token信息：', res)
          // 保存access_token的操作，小编这里样例，就直接放在data中了
          // _this.accessToken = res.data.access_token
          uni.request({
            url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${res.data.access_token}`,
            method: 'POST',
            data: {
              code: e.detail.code
              // openid: _this.openid (openid非必填，所以不需要先获取用户信息，再获取手机号)
            },
            success(res) {
              console.log('获取的用户手机号userPhone：', res)
            }
          })
        }
      })
    },
    setDataI() {
      console.log(this)
    },
    login() {
      let that = this
      this.modelDefault.show = true

      uni.login({
        provider: 'weixin', //使用微信登录
        onlyAuthorize: true,
        success: function (loginRes) {
          // console.log(loginRes);

          weChatMiAppLogin(loginRes.code).then(res => {
            console.log('login -> ', res)
            that.$store.dispatch('user/setToken', res.data.token)
            that.$store.dispatch('user/setSessionResult', res.data.sessionResult)
            // console.log(that.$store.state.user)

            uni.setStorageSync('foa-user-token', res.data.token);

            setTimeout(function () {
              uni.switchTab({
                url: '/pages/dashboard/index'
              });
            }, 500)
          }).catch(e => {
            console.log('失败了 ->', e)
            if (e.code === 403) {
              that.modelDefault.show = true
              that.modelDefault.openid = e.data.sessionResult.openid
            }
          })
        }
      });
    },
    modelDefaultConfirm() {
      uni.redirectTo({
        url: '/pages/login/register?openId=' + this.modelDefault.openid
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-body {
  height: 100vh;

  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login-body_form {
    width: calc(100% - 5vh);
    height: 70vh;
    overflow: scroll;
  }
  .login-body_form_logo {
    display: block;
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto;
  }

  .login-body_form_title {
    text-align: center;
    color: #2C405A;
    margin-top: 100rpx;
    margin-bottom: 25rpx;
    font-size: 48rpx;
  }
  .login-body_form_title_text {
    text-align: center;
    color: #2C405A;
    margin-top: 25rpx;
    margin-bottom: 140rpx;
  }

  .login-body_form_btn_login {
    margin-bottom: 30rpx;
  }

  .login-body_form_login_account {
    text-align: center;
  }
}
</style>